<template>
  <n-grid :x-gap="10" :cols="24">
    <n-gi :span="10"
      >
      <n-card :bordered="false" class="proCard" :style="{ height: `${bodyHeight}px` }">
        <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
          <template #statusSlot="{ model, field }">
            <n-input v-model:value="model[field]" />
          </template>
        </BasicForm>
        <BasicTable
          :columns="columns"
          :request="loadDataTable"
          :row-key="(row) => row.dictionaryId"
          v-model:checked-row-keys="checkedRowKeys"
          ref="actionRef"
          :actionColumn="actionColumn"
        >
          <template #tableTitle>
            <n-button type="primary" @click="addTable">
              <template #icon>
                <n-icon>
                  <PlusOutlined />
                </n-icon>
              </template>
              添加字典
            </n-button>
          </template>

          <template #action>
            <TableAction />
          </template>
        </BasicTable>

        <Edit ref="editRef" @reloadTable="reloadTable"></Edit>
      </n-card>
    </n-gi>
    <n-gi :span="14">
      <ItemsIndex ref="itemsIndexRef" :dictionaryIds="checkedRowKeys"></ItemsIndex>
    </n-gi>
  </n-grid>
</template>

<script lang="ts" setup>
import { reactive, ref, unref, h, onMounted, computed } from 'vue';
import { useMessage, useDialog, NSwitch, NTag, DataTableRowKey } from 'naive-ui';
import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
import { BasicTable, TableAction } from '@/components/Table';
import { getPageList, deleteById, updateEnabled } from '@/api/system/dictionary';
import { PlusOutlined } from '@vicons/antd';

import ItemsIndex from './items/index.vue';
import Edit from './edit.vue';

const formRef: any = ref(null);
const message = useMessage();
const actionRef = ref();
const dialog = useDialog();

const formBtnLoading = ref(false);
const checkedAll = ref(false);
const expandedKeys = ref([]);
const checkedKeys = ref(['console', 'step-form']);
const editRef = ref(null);
let checkedRowKeys = ref([]);

const schemas: FormSchema[] = [
  {
    field: 'dictCode',
    component: 'NInput',
    label: '字典名称',
    componentProps: {
      placeholder: '请输入字典名称',
      onInput: (e: any) => {},
    },
  },
  {
    field: 'dictName',
    component: 'NInput',
    label: '字典名称',
    componentProps: {
      placeholder: '请输入字典名称',
      onInput: (e: any) => {},
    },
  },
];

const [register, {}] = useForm({
  gridProps: { cols: '1 s:1 m:2' },
  labelWidth: 80,
  schemas,
});

function handleSubmit(values: Recordable) {
  Object.assign(formParams, values);
  reloadTable();
}

function handleReset(values: Recordable) {}

const columns = [
  //选择框
  {
    key: 'selection',
    type: 'selection',
    multiple: false,
  },
  {
    title: '#',
    key: 'key',
    width: 20,
    render: (_, index) => {
      return `${index + 1}`;
    },
  },
  {
    title: '字典编号',
    key: 'dictCode',
    width: 100,
  },
  {
    title: '字典名称',
    key: 'dictName',
    width: 100,
  },
];

const formParams = reactive({
  configKeyCode: '',
  configName: '',
});

const actionColumn = reactive({
  width: 100,
  title: '操作',
  key: 'action',
  fixed: 'right',
  render(record) {
    return h(TableAction, {
      style: 'button',
      actions: [
        {
          label: '编辑',
          onClick: handleEdit.bind(null, record),
          ifShow: () => {
            return true;
          },
          //auth: ['basic_list'],
        },
        {
          label: '删除',
          icon: 'ic:outline-delete-outline',
          onClick: handleDelete.bind(null, record),
          // 根据业务控制是否显示 isShow 和 auth 是并且关系
          ifShow: () => {
            return true;
          },
          // 根据权限控制是否显示: 有权限，会显示，支持多个
          //auth: ['basic_list'],
        },
      ],
    });
  },
});

function addTable() {
  editRef.value.open();
}

const loadDataTable = async (res: any) => {
  var data = await getPageList({ ...formParams, ...res });
  return data.result;
};

function reloadTable() {
  actionRef.value.reload();
}

function handleEdit(record: Recordable) {
  editRef.value.open(record);
}

function handleDelete(record: Recordable) {
  dialog.info({
    title: '提示',
    content: `您确定想删除吗?`,
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      deleteById(record.dictionaryId).then((res) => {
        if (res.success) {
          message.success('删除成功');
          reloadTable();
        }
      });
    },
    onNegativeClick: () => {
      message.error('已取消');
    },
  });
}
</script>

<style lang="less" scoped></style>
